<template>
  <div class="pointsRule">
    <el-card class="avue_height">
      <el-button type="primary" @click="addLevel" style="margin-bottom: 20px"
        >新增</el-button
      >
      <avue-crud
        ref="crud"
        style="width: 100%"
        :data="loadData"
        :option="tableOption"
        :table-loading="loading"
      >
        <template slot-scope="scope" slot="indexLabel">
          <span>{{
            scope.row.$index + (page.current - 1) * page.size + 1
          }}</span>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button @click="edit(scope.row)" type="text" icon="el-icon-edit"
            >编辑</el-button
          >
          <el-button @click="del(scope.row)" type="text" icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </avue-crud>
      <template>
        <div style="width: 100%; position: relative; height: 100px">
          <el-pagination
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :pager-count="7"
            :current-page="page.current"
            :page-size="page.size"
            :total="page.total"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin: 2% 0; position: absolute; right: 1%"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
          ></el-pagination>
        </div>
      </template>
    </el-card>
    <el-dialog
      :title="title"
      destroy-on-close
      :visible.sync="dialogVisible"
      width="45%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="退款原因：" prop="refundReason">
          <el-input
            v-model="ruleForm.refundReason"
            placeholder="请输入退款原因"
            :maxLength="10"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlClose">取 消</el-button>
        <el-button type="primary" @click="handlSure" :loading="loadingSure"
          >保 存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script src="./index.js"></script>
<style lang="scss" scoped>
</style>